<html>
<head>
    <title>Gallery - Snapshot by TEMPLATED</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
    * {
	border:none; 
	margin:0; 
	padding:0;
}

p {
	margin:15px 0;
}

h1 {
	font-size:20px;
	margin-bottom:20px; 
}
h2 {
	margin-top:20px;
}

body {
	color:#000; 
	font:12.35px "Lucida Grande", Arial, Georgia, Verdana, sans-serif;
}

.fadingLinks a {
        color: #000;
	
	/* Animate color property across all supporting browsers */
        -webkit-transition: color 1s ease-in-out;
	-o-transition: color 1s ease-in-out;
	-moz-transition: color 1s ease-in-out;
	transition: color 1s ease-in-out;
    }
        .fadingLinks a:hover {
            color: #a00;
        }
        
    .button {
        background: #700;
        color: #fff;
        padding: 5px 10px;
        text-decoration: none;
		
	/* Rounded corners */
        -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
        border-radius: 10px;
		
        /* Box shadow */
	-webkit-box-shadow: 0px 0px 3px #212121;
	-moz-box-shadow: 0px 0px 3px #212121;
	box-shadow: 0px 0px 3px #212121;
        
        /* Animate all properties across supporting browsers */
        -webkit-transition: all 1s ease-in-out;
	/* -o-transition: all 1s ease-in-out; */
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
    }
        .button:hover {
            background: #b00;
	    
	    /* Box shadow animation bugged in Opera */
            -webkit-box-shadow: 0px 0px 10px #000;
            -moz-box-shadow: 0px 0px 10px #000;
	    box-shadow: 0px 0px 10px #000;
        }
    
    .growBox {
        width: 400px;
        height: 200px;
        border: 1px solid #212121;
	
	/* Animate height across supporting browsers */
	-webkit-transition: height 1s ease-in-out;
	-o-transition: height 1s ease-in-out;
	-moz-transition: height 1s ease-in-out;
	transition: height 1s ease-in-out;
    }
        .growBox:focus {
            height: 400px;
        }
        
    #animationBox {
        border: 1px solid #212121;
        width: 400px;
        height: 200px;
        position: relative;
    }
    #animationBox p {
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: #b00;
        margin: 0;
        padding: 0;
        bottom: 0;
        display: block;
	
	/* Animate all properties across supporting browsers */
        -webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
    }
        #animationBox:hover p {
	    /* Transform property allows us to animate the image */
	    -webkit-transform: translate(300px,-100px);
            -moz-transform: translate(300px,-100px);
	    -o-transform: translate(300px,-100px);
	    transform: translate(300px,-100px);
        }


    </style>


</head>



<body>
  <h2>Fading Links</h2>		
  <p class="fadingLinks">Look at the really cool <a href="#">test link</a>.</p>

  <h2>Fading Buttons</h2>
  <p><a class="button" href="#">Really Cool Button</a></p>

  <h2>Increasing Box Size</h2>
  <textarea class="growBox"></textarea>

  <h2>Brief Animation</h2>
  <div id="animationBox">
<div id="animationBox">
        <p></p>
</div>
</body>
</html>